import ScrollBarLayout from '@/components/ScrollBarLayout';
import { Col, Form, Input, Radio, Row, Select } from 'antd';
import React, { useEffect, useImperativeHandle } from 'react';
import { PersonalCenterAPI } from '../common/type';
import pageStyles from '@/common/pageLayout.less';
import { TypographyTitle } from '@/components/Typography';
import { RegularExpression } from '@/common/constVariable';
import { CenterAvatar } from './CenterAvatar';
import formViewStyle from '../common/styles.less';
import { ManOutlined, WomanOutlined } from '@ant-design/icons';
import MyIcon from '@/components/MyIcon';

export const CenterFormView = React.forwardRef<
  PersonalCenterAPI.IUpdateLeftColFormRef,
  PersonalCenterAPI.ICenterFormView
>(({ menuSelectKey, userInfoObj, reloadDetailInfo }, ref) => {
  const [centerBasicForm] = Form.useForm();
  const [centerPasswordForm] = Form.useForm();

  useImperativeHandle(ref, () => ({
    centerBasicForm: centerBasicForm,
    centerPasswordForm: centerPasswordForm,
  }));

  useEffect(() => {
    if (userInfoObj && userInfoObj?.id) {
      centerBasicForm?.setFieldsValue(userInfoObj);
    }
  }, [userInfoObj?.id, userInfoObj?.versionNum]);

  return (
    <>
      <ScrollBarLayout>
        {menuSelectKey && menuSelectKey?.toString() == 'dataSettings' && (
          <TypographyTitle
            level={5}
            style={{
              margin: '0px 0px 1rem',
            }}
          >
            基本资料
          </TypographyTitle>
        )}
        <Row>
          <Col span={13}>
            <div className={pageStyles['fromView-styles']}>
              {menuSelectKey && menuSelectKey?.toString() == 'dataSettings' && (
                <Form form={centerBasicForm}>
                  <Row>
                    <Col span={24}>
                      <Form.Item label="登录名" name="name">
                        <Input placeholder="请输入登录名" allowClear disabled />
                      </Form.Item>
                    </Col>

                    <Col span={24}>
                      <Form.Item label="工号" name="workNum">
                        <Input
                          disabled
                          placeholder="由系统管理员统一分配"
                          allowClear
                        />
                      </Form.Item>
                    </Col>

                    <Col span={24}>
                      <Form.Item
                        label="姓名"
                        name="realName"
                        rules={[
                          {
                            required: true,
                            message: '请输入姓名',
                          },
                        ]}
                      >
                        <Input placeholder="请输入姓名" allowClear />
                      </Form.Item>
                    </Col>

                    <Col span={24}>
                      <Form.Item label="性别" name="sex" initialValue={0}>
                        {/* <Select placeholder="请选择性别" allowClear>
                          <Select.Option value={0}>未知</Select.Option>
                          <Select.Option value={1}>男</Select.Option>
                          <Select.Option value={2}>女</Select.Option>
                        </Select> */}
                        <Radio.Group
                          optionType="button"
                          buttonStyle="solid"
                          className={formViewStyle['centerFormRadio']}
                        >
                          <Radio.Button value={0}>
                            未知&nbsp;
                            <MyIcon
                              type="icon-sex"
                              isTheme={false}
                              style={{ fontSize: 16 }}
                            />
                          </Radio.Button>
                          <Radio.Button value={1}>
                            男&nbsp;
                            <ManOutlined />
                          </Radio.Button>
                          <Radio.Button value={2}>
                            女&nbsp;
                            <WomanOutlined />
                          </Radio.Button>
                        </Radio.Group>
                      </Form.Item>
                    </Col>

                    <Col span={24}>
                      <Form.Item
                        label={'类型'}
                        name="userType"
                        initialValue={0}
                        rules={[
                          {
                            required: true,
                            message: '请选择用户类型',
                          },
                        ]}
                      >
                        <Select placeholder="请选择用户类型">
                          <Select.Option key={0} value={0}>
                            系统用户
                          </Select.Option>
                          <Select.Option key={1} value={1}>
                            应用用户
                          </Select.Option>
                        </Select>
                      </Form.Item>
                    </Col>

                    <Col span={24}>
                      <Form.Item
                        label="手机"
                        name="phoneMobile"
                        rules={[
                          {
                            required: true,
                            message: '请输入手机',
                          },
                          {
                            pattern: RegularExpression.phone,
                            message: '手机格式不正确！',
                          },
                        ]}
                      >
                        <Input placeholder="请输入手机" allowClear />
                      </Form.Item>
                    </Col>

                    <Col span={24}>
                      <Form.Item
                        label="办公电话"
                        name="phoneOffice"
                        rules={[
                          {
                            required: true,
                            message: '请输入办公电话',
                          },
                          {
                            pattern: RegularExpression.workPhone,
                            message: '办公电话格式不正确！',
                          },
                        ]}
                      >
                        <Input placeholder="请输入办公电话" allowClear />
                      </Form.Item>
                    </Col>
                    <Col span={24}>
                      <Form.Item
                        label="邮箱"
                        name="emailNum"
                        rules={[
                          {
                            pattern: RegularExpression.email,
                            message: '邮箱格式不正确！',
                          },
                        ]}
                      >
                        <Input placeholder="请输入邮箱" allowClear />
                      </Form.Item>
                    </Col>
                    <Col span={24}>
                      <Form.Item
                        label="QQ号"
                        name="qqNum"
                        rules={[
                          {
                            pattern: RegularExpression.qq,
                            message: 'QQ号格式不正确！',
                          },
                        ]}
                      >
                        <Input placeholder="请输入QQ号" allowClear />
                      </Form.Item>
                    </Col>

                    <Col span={24}>
                      <Form.Item
                        label="微信"
                        name="wechatNum"
                        rules={[
                          {
                            pattern: RegularExpression.weChat,
                            message: '微信格式不正确！',
                          },
                        ]}
                      >
                        <Input placeholder="请输入微信" allowClear />
                      </Form.Item>
                    </Col>

                    <Col span={24}>
                      <Form.Item
                        label="邮编"
                        name="zipcode"
                        rules={[
                          {
                            pattern: RegularExpression?.zipCode,
                            message: '邮编格式不正确！',
                          },
                        ]}
                      >
                        <Input placeholder="请输入邮编" allowClear />
                      </Form.Item>
                    </Col>
                    <Col span={24}>
                      <Form.Item label={'是否坐席'} name="isAgent">
                        <Select placeholder="请选择是否坐席" disabled>
                          <Select.Option key={0} value={0}>
                            否
                          </Select.Option>
                          <Select.Option key={1} value={1}>
                            是
                          </Select.Option>
                        </Select>
                      </Form.Item>
                    </Col>
                    <Col span={24}>
                      <Form.Item label={'分机号'} name="extNum">
                        <Input
                          placeholder={'由系统管理员统一分配'}
                          disabled={true}
                        />
                      </Form.Item>
                    </Col>

                    <Col span={24}>
                      <Form.Item label="地址" name="address">
                        <Input placeholder="请输入地址" allowClear />
                      </Form.Item>
                    </Col>
                  </Row>
                </Form>
              )}
              {menuSelectKey && menuSelectKey?.toString() == 'changePassword' && (
                <Form form={centerPasswordForm}>
                  <TypographyTitle
                    level={5}
                    style={{
                      margin: '0px 0px 1rem',
                    }}
                  >
                    修改密码
                  </TypographyTitle>
                  <Row>
                    <Col span={24}>
                      <Form.Item
                        label="原密码"
                        name="pwd"
                        rules={[
                          {
                            required: true,
                            message: '请输入原密码',
                          },
                          {
                            pattern: new RegExp(
                              '^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$',
                              'g',
                            ),
                            message:
                              '密码包括数字、小写字母、大写字母、特殊符号4类中至少3类',
                          },
                          {
                            min: 8,
                            message: '长度至少8位',
                          },
                        ]}
                      >
                        <Input
                          autoComplete="off"
                          placeholder="请输入原密码"
                          allowClear
                        />
                      </Form.Item>
                    </Col>
                    <Col span={24}>
                      <Form.Item
                        label="新密码"
                        name="newPwd"
                        rules={[
                          {
                            required: true,
                            message: '请输入新密码',
                          },
                          {
                            pattern: new RegExp(
                              '^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$',
                              'g',
                            ),
                            message:
                              '密码包括数字、小写字母、大写字母、特殊符号4类中至少3类',
                          },
                          {
                            min: 8,
                            message: '长度至少8位',
                          },
                        ]}
                      >
                        <Input.Password
                          // autoComplete="off"
                          placeholder="请输入新密码"
                          allowClear
                          autoComplete="new-password"
                        />
                      </Form.Item>
                    </Col>
                    <Col span={24}>
                      <Form.Item
                        label="确认密码"
                        name="confirmPwd"
                        rules={[
                          {
                            required: true,
                            message: '请再次输入新密码',
                          },
                          {
                            pattern: new RegExp(
                              '^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$',
                              'g',
                            ),
                            message:
                              '密码包括数字、小写字母、大写字母、特殊符号4类中至少3类',
                          },
                          {
                            min: 8,
                            message: '长度至少8位',
                          },
                        ]}
                        initialValue={undefined}
                      >
                        <Input.Password
                          autoComplete="new-password"
                          placeholder="请再次输入新密码"
                          allowClear
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </Form>
              )}
            </div>
          </Col>
          <Col span={1}></Col>
          <Col span={10}>
            {menuSelectKey && menuSelectKey?.toString() == 'dataSettings' && (
              <CenterAvatar
                userInfoObj={userInfoObj}
                reloadDetailInfo={reloadDetailInfo}
              />
            )}
          </Col>
        </Row>
      </ScrollBarLayout>
    </>
  );
});
